<template>
   <el-aside width="auto"> <el-menu default-active="2" class="el-menu-vertical-demo" :collapse="selfCollapse">
                <el-menu-item index="1">
                    <el-icon-location style="height: 2em;width: 2em;"></el-icon-location>
                    <span>首页</span>
                </el-menu-item>
                <el-menu-item index="2">
                    <el-icon-menu style="height: 2em;width: 2em;"></el-icon-menu>
                    <span>图标选择器</span>
                </el-menu-item>
                <el-menu-item index="3" >
                    <el-icon-document style="height: 2em;width: 2em;"></el-icon-document>
                    <span>省市级选择</span>
                </el-menu-item>
                <el-menu-item index="4">
                    <el-icon-setting style="height: 2em;width: 2em;"></el-icon-setting>
                    <span>Navigator Four</span>
                </el-menu-item>
            </el-menu></el-aside>
</template>

<script lang="ts" setup>
import {ref,computed} from 'vue'
const props=defineProps(['collapse'])
const selfCollapse=computed(()=>{
    return props.collapse
})

</script>
<style lang="scss" scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
}



</style>
